<template>
	<view class="commodity">
		<view class="commodity_itme" v-for="(itme,index) in list" @click="ProductDetails(itme)" :key="itme.id"
			:class="b_type == 1 && itme.status != 2 ? 'stybg' : ''"  @touchstart="touchStart(itme, index, $event)"
                    @touchend="touchEnd(itme, index, $event)" :style="sutat && current_index == index ? 'left: -100rpx' : 'left: 0%;'"> 
			<view class="l_img">
				<image :src=" urlimg + itme.cover" v-if="itme.cover || ''" ></image>
				<image v-if="itme.images" :src="itme.images.split(',')[0]"></image>
			</view>
			<view class="l_ifom">
				<view class="l_name">{{ itme.title }}</view>
				<view class="l_fl">
					物品类别：{{itme.categoryTitle}}
				</view>
				<view class="sum" :style="b_type ?  (itme.status == 2 && b_type == 2 ?   'margin-top:10rpx' : '') : ''">
					<view style="color: #000;">
						评估价值：<text>{{ itme.score }}</text>积分
					</view>
					<!-- 置物车按钮 -->
					<view class="btn" @click.stop="ConFirm(itme)" v-if="!b_type">
						立即置换
					</view>
					<!-- 我的闲置 -->
					<template v-if="b_type == 1">
						<view class="my_ie">
							<view class="btn" @click.stop="Delivery(itme)" v-if="itme.status == 2">
								邮寄
							</view>
							<view>{{ itme.status == 2 ? "未寄出" : "已寄出" }}</view>
						</view>
					</template>
					<!-- 我的兑换 -->
					<template v-if="b_type == 2">
						<view class="my_sub">
							<view class="btns" v-if="itme.status == 1">
								<view class="btn" @click.stop="Cancel(itme.id)">
									取消置换
								</view>
								<view class="btn" @click.stop="ConFirm(itme)">
									立即置换
								</view>
							</view>
							<view class="shipment" v-if="itme.status == 2 || itme.status == 3 || itme.status == 4 || itme.status == 0">
								{{ itme.status == 2 ? '待发货' : (itme.status == 2 ? '已发货' : (itme.status == 0 ? '已取消' : '已收货')) }}
							</view>
							<view class="btns">
								<view class="btn" @click.stop="Logistics(itme)" v-if="itme.status == 3">
									查看物流
								</view>
								<view class="btn" @click.stop="Confirmharvest(itme.id)" v-if="itme.status == 3">
									确认收货
								</view>
								<view class="btn" @click.stop="evaluate(itme)" v-if="itme.status == 4"
									:style="itme.commentn > 0 ? 'background: #E8E8E8;border:none' : ''">
									{{ itme.commentn > 0 ? '已评价' : '评价' }}
								</view>
							</view>
						</view>
					</template>
				</view>
			</view>
			<view class="delete" v-if="sutat && current_index == index" @click.stop="Delete(itme,index)">删除</view>
		</view>
	</view>
</template>

<script>
import { orderupdateData , collect } from '@/core/api/index.js'
export default {
	props: {
		/*0.立即置换，1邮寄/未寄出，2，已寄出，3查看物流，*/
		b_type: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
            urlimg:'',
			sutat: false,//是否滑动
			current_index: -1,//滑动的项
		}
	},
	mounted() {
	    this.urlimg = this.$imgurl	
	},
	methods: {
		/*
		置换
		*/
		ConFirm(itme) {
			uni.navigateTo({
				url: '/pages/appraise/substitution?goodata=' + encodeURIComponent(JSON.stringify(itme))
			})
		},
		//油寄
		Delivery(itme) {
			this.$emit('Delivery', itme)
		},
		//删除
		async Delete(itme,index){
			if(this.b_type == 0){
			   const data = await collect({ id: itme.id, value: 0 })
			   console.log(data)
			   if (data.code == 1) {
			   	uni.showToast({
			   		title: '删除成功'
			   	})
			    this.$emit('updata',true) //更新数据
			   	this.current_index = -1//滑动的项
			   }	
			}
		},
		/*
		商品详情
		*/
		ProductDetails(item) {
			console.log(item)
			if (this.b_type == 1) {
				return
			}
			uni.navigateTo({
				url: '/pages/product_details/index?id=' + (this.b_type == 0 ? item.id : item.mall_goods_id)
			})
		},
		/**
		* 触摸开始  
		**/
		touchStart(item, index, e) {
		    console.log("触摸开始", index, e)
			if(this.b_type != 0) return
		    this.current_index = index
		    this.touchStartX = e.touches[0].clientX;
		    this.touchStartY = e.touches[0].clientY;
		},
		
		/**  
		* 触摸结束  
		**/
		touchEnd(item, index, e) {
			if(this.b_type != 0) return
		    let deltaX = e.changedTouches[0].clientX - this.touchStartX;
		    let deltaY = e.changedTouches[0].clientY - this.touchStartY;
		    console.log("触摸结束", e.changedTouches[0].clientX, deltaX, deltaY)
		    if (Math.abs(deltaX) > 50 && Math.abs(deltaX) > Math.abs(deltaY)) {
		        if (deltaX >= 0) {
		            console.log("左滑")
		            setTimeout(() => {
		                this.sutat = false
		            }, 50)
		        } else {
		            console.log("右滑" , this.current_index)
		            setTimeout(() => {
		                this.sutat = true
		            }, 50)
		            // this.sutat = true
		
		        }
		        // this.list = this.list.map(ele => { ele.isDelete = false; return ele });
		    } else if (Math.abs(deltaY) > 50 && Math.abs(deltaX) < Math.abs(deltaY)) {
		        if (deltaY < 0) {
		            console.log("上滑")
		        } else {
		            console.log("下滑")
		        }
		        // item.isDelete = false;
		    } else {
		        console.log("可能是误触！")
		    }
		},
		/*
	   置换
	   */
		ConFirm(item) {
			uni.navigateTo({
				url: '/pages/appraise/substitution?goodata=' + encodeURIComponent(JSON.stringify(item))
			})
		},
		//查看物流
		Logistics(item) {
			uni.navigateTo({
				url: '/pages/my/logistics?goodata=' + encodeURIComponent(JSON.stringify(item))
			})
		},
		//取消置换
		Cancel(id){
			uni.showModal({
				title: '提示',
				content: '确认取消当前订单?',
				success: async (res) => {
					if (res.confirm) {
						const data = await orderupdateData({ id, status: 0 })
						if (data.code == 1) {
							this.$emit('harve', true)
						}
						// console.log(data)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//确认收货
		Confirmharvest(id) {
			console.log(id)
			uni.showModal({
				title: '提示',
				content: '是否确认收货?',
				success: async (res) => {
					if (res.confirm) {
						const data = await orderupdateData({ id, status: 4 })
						if (data.code == 1) {
							this.$emit('harve', true)
						}
						// console.log(data)
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//评价
		evaluate(item) {
			if (item.commentn > 0) return
			uni.navigateTo({
				url: '/pages/my/evaluate?evdata=' + encodeURIComponent(JSON.stringify(item))
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.commodity {
    .stybg{
		background: #E8E8E8;
	}
	// display: flex;
	.commodity_itme {
		margin: 0 18rpx 18rpx;
		padding: 32rpx 22rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		background-color: #fff;
		position: relative;
		// overflow: hidden;
        transition-duration: .3s;
		.delete{
			width: 100rpx;
			height: 100%;
			background-color: red;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			top: 0%;
			right:-100rpx;
		}
		.l_img {
			width: 126rpx;
			height: 126rpx;
			border: 1rpx solid #E3E3E3;
			border-radius: 12rpx 12rpx 12rpx 12rpx;

			image {
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				width: 100%;
				height: 100%;
			}
		}

		.l_ifom {
			margin-left: 22rpx;
			flex: 1;

			.l_name {
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				font-size: 26rpx;
				color: #000000;
				margin-bottom: 11rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				// font-weight: bold;
			}

			.l_fl {
				width: fit-content;
				// height: 36rpx;
				padding: 0rpx 8rpx;
				margin-left: -1rpx;
				background: #FFE4CC;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid #D5D5D5;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 400;
				text-align: center;
				font-size: 24rpx;
				color: #545454;
				line-height: 32rpx;
			}

			.sum {
				display: flex;
				justify-content: space-between;
				margin-top: 2rpx;
				align-items: center;
				font-size: 26rpx;
				width: 100%;

				text {
					color: #ED6D00;
				}

				.my_ie {
					display: flex;
					align-items: center;

					view {
						margin-left: 15rpx;
					}
				}

				.btn {
					width: 138rpx;
					height: 52rpx;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					border: 1rpx solid #10100E;
					text-align: center;
					line-height: 50rpx;
					font-size: 24rpx;
				}

				.shipment {
					position: absolute;
					top: 17%;
					right: 6%;
					font-size: 26rpx;
					color: #545454;
				}
			}
		}
	}

	.btns {
		display: flex;

		.btn {
			margin-left: 10rpx;
		}
	}
}</style>